import { useMenuStore } from './../../stores/menuStore';
import Icon from '@/components/icon/icon.vue'
import { ElSpace } from 'element-plus';
import { useTagviewStore } from './../../stores/tagviewStore';
import { reactive, ref } from 'vue';
import { useAuthUserStore } from './../../stores/authuserStore';
import { Expand, Fold, Setting, Search, Bell } from '@element-plus/icons';
import Userinfo from './ActionTabs/userinfo';
import MessageList from './ActionTabs/messageList.vue';
import { useMainStore } from '@/stores/mainStore';
import Cookies from 'js-cookie';
import gjj from '@/assets/images/img/gjj.jpg';
import Logo from '@/assets/images/img/logo.png';

const menuStore = useMenuStore()
const tagviewStore = useTagviewStore()

const _cacheState = reactive({
  name: '',
  color1: '#586476',
  color2: '#586476',
  color3: '#97AAC8',
  closeShow: {} as any,
  userinfoShow: false,
  messageShow: false,
})

const messageRef = ref<any>();

const setUserinfoShow = (val: boolean) => {
  _cacheState.userinfoShow = val
}

const setMessageShow = (val: boolean) => {
  _cacheState.messageShow = val;
}

const menutitle = {
  display: 'flex',
  alignItems: 'center'
};

const HeadLeftComponent = (): JSX.Element => {
  return <div class='comp-head-left'>
    <div style={menutitle}>
      <img src={gjj} width={50} height={50}/> 
      <img src={Logo}  width= {150} style={{marginLeft: '10px'}}/>
    </div>
    {/*<ElSpace size={18}>*/}
    {/*  {*/}
    {/*    menuStore.isCollapse ?*/}
    {/*      <el-icon onClick={() => { menuStore.toggleCollapse(false) }}><Expand /></el-icon> : <el-icon onClick={() => { menuStore.toggleCollapse(true) }}><Fold /></el-icon>*/}
    {/*  }*/}
    {/*</ElSpace>*/}
  </div>
}


const HeadRightComponent = (): JSX.Element => {

  const authUserStore = useAuthUserStore()
  const mainStore = useMainStore()

  return <div class='comp-head-right' style={{height: '20px'}}>
      <span>{username}</span>
        <el-button onClick={reBack} type='info' text>退出</el-button>
    </div>
}

const userStore = useAuthUserStore();
const username= userStore.username;
const reBack= () => {
  userStore.clearUser()
  userStore.toLogin()
  userStore.setToken('')
  Cookies.remove('token')
}

const MenuHead = (props: IMenu.IMenuHeadProps): JSX.Element => {
  // 缓存 tagview name
  _cacheState.name = props.name

  return <div class='comp-head'>
    <HeadLeftComponent />
    <HeadRightComponent />
  </div>;
};

export default MenuHead;